<template>
<h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="num1">
  <input type="text" placeholder="请输入数字2" v-model="num2">
  <hr>
  <button @click="calc('+')">加</button>
  <button @click="calc('-')">减</button>
  <button @click="calc('*')">乘</button>
  <button @click="calc('/')">除</button>

  <h4>运算结果:{{result}}</h4>
</template>

<script setup>
import {ref} from "vue";
//定义响应式变量
const num1=ref('');
const num2=ref('');
const result=ref('');
//定义箭头函数
const calc=(o)=>{
  //响应式变量在JS中使用必须.value！
  //eval（“5*2”）结果为10 将字符串形式的算式转为JS进行运算
  result.value=eval(num1.value+o+num2.value);
}
</script>

<style scoped>

</style>